<template>
    <div class="rl31dg-2 iKCdHH">
        <div class="rl31dg-3 fCytZy">
            <div class="sc-1d9uflq-1 kjzgGw">
                <div class="sc-1vhl1ud-0 iAHSCb">
                    <h1 class="jc6i63-0 sc-1d9uflq-2 cmoiYo">选择应用仓库</h1>
                    <p class="djs2am-0 sc-1d9uflq-3 hVuhLe">自动创建应用数据和生成持续集成脚本</p>
                </div>

                <div class="sc-494z8g-0 sc-14i1hry-0 kEwNER">
                    <span style="font-size:13px;">
                        项目连接Gitlab可以更好的帮你进行项目管理，实时跟进项目开发进度和情况
                    </span>
                </div>

                <div class="zfc3g7-0 cFMoVy">

                    <div class="ksa0ua-0 elwCEo" v-for="(item , index) in svnList" :key="index">
                        <div class="sc-1ngwmbv-3 cZlSjT git-host-item dash-size-regular">
                            <div class="sc-icons">
                                <i :class="item.icon"></i>
                            </div>
                            <div class="sc-1ngwmbv-4 gWayKh">
                                <div class="sc-1ngwmbv-1 jPmxjq title-text">
                                    {{ item.name }}
                                </div>
                                <div class="sc-1ngwmbv-2 hhsakP sub-text">
                                    <div>
                                       未连接
                                    </div>
                                </div>
                            </div>
                            <div class="sc-1ngwmbv-5 ghKyco">
                                <button @click="connectGit(item)" class="aap711-0 LrZpX  dash-color-primary dash-size-regular">
                                    <span><i class="fas fa-link"></i> 连接</span>
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <el-dialog
            title="输入gitlab的Person Token和地址"
            :visible.sync="gitlabDialogVisible"
            width="600px">

            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item label="Gitlab服务地址" prop="gltlabHost" :label-width="formLabelWidth">
                  <el-input v-model="form.gltlabHost" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="PersonToken" prop="personToken" :label-width="formLabelWidth">
                  <el-input v-model="form.personToken" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>

            <el-link href="https://gitlab.your-domain.com" style="margin-left:20px" type="primary" target="_blank">PersonToken获取方式</el-link>

            <span slot="footer" class="dialog-footer">
                <el-button @click="gitlabDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="generatorGit('form')">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>

export default {
    data(){
        return {
            gitlabDialogVisible: false ,
            formLabelWidth: '120px' ,
             form: {
                 gltlabHost: '',
                 personToken: ''
             },
            svnList:[
                {icon:'fab fa-gitlab' , name:'Gitlab' , isConnect:true , status:1 },
                {icon:'fab fa-gitkraken' , name:'Gitee' , isConnect:false , status:0 },
                {icon:'fab fa-github' , name:'Github' , isConnect:false , status:0 },
                {icon:'fab fa-bitbucket' , name:'Bitbucket' , isConnect:false , status:0 }
            ],
            rules: {
                gltlabHost: [
                    { required: true, message: '请输入Gitlab服务地址', trigger: 'blur' }
                ],
                personToken: [
                    { required: true, message: '请输入PersonToken', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        connectGit(item) {
            console.log('connectGit = ' + item);
            if(item.status == 0){
                this.$message({
                    message: '功能还在测试中...',
                    type: 'warning'
                });
                return ;
            }else{
                this.gitlabDialogVisible = true ;
            }
        } ,
        generatorGit(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var toPath = '/build/overview' ;
                    this.$router.push({path: toPath});
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
@import '@/asserts/css/build/connectGit.scss';

.dingtalk-icons{
    width: 20px;
    margin-right: 10px;
}

.sc-icons{
    height: 100%;
    font-size: 40px;
    margin-right: 10px;
    color: #005bd4;
}
</style>


